<template>
	<!--html-->
	<div id="index">
		<div class="header clearfix">
			<div class="title_icon fl" @click="show=!show"><i class="iconfont">&#xe65f;</i></div>
			<div class="title fl">{{header_title}}</div>
			<div class="user fr"><i class="iconfont">&#xe60d;</i></div>
			<div class="city fr" @click="Location('/citys','请选择城市')">{{header_city}}</div>
		</div>
		<div class="zz" v-if="show" @click="show=!show"></div>
		<transition name="boom">
			<div v-if="show" class="aside">
				<!--<router-link to="wel">
					<div>首页</div>
				</router-link>
				<router-link to="wel1">
					<div>影片</div>
				</router-link>
				<router-link to="wel1">
					<div>影院</div>
				</router-link>
				<router-link to="wel1">
					<div>商城</div>
				</router-link>
				<router-link to="wel1">
					<div>我的</div>
				</router-link>
				<router-link to="wel1">
					<div>卖座卡</div>
				</router-link>-->
				<div v-for="m in menu" @click="Location(m.path,m.name)">{{m.name}}</div>
			</div>
		</transition>

		<!--跳转路由功能的组件 和<a></a>作用类似-->
		<!--路由  <component is='xxx'></component>的作用类似-->

		<router-view>

		</router-view>
	</div>
</template>

<script>
	import {b} from "../js/new.js";
	console.log(b)
	b.fun();
	
	export default {
		computed: {
			//计算属性，根据数据依赖变化而变化
			header_title: function() {
				return this.$store.state.title;
			},
			header_city: function() {
				return this.$store.state.city;
			}
		},
		methods: {
			Location: function(p, q) {
				//通过$router.push的方法，传路径
				//和location.href的用法一致，直接传地址就可以使用了
				this.$router.push({
					path: p,
				});
				//改变title的状态   $store.commit(自定义事件，传参)
				this.$store.commit("toggleTitle", q)
				this.show = false;
			}
		},
		data: function() {
			return {
				show: false,
				menu: [{
						name: "首页",
						path: "/home"
					},
					{
						name: "影片",
						path: "/movie"
					},
				]
			}
		}
	}
</script>

<style lang="scss">
	/*csss*/
	
	@import "../scss/index.scss";
</style>